<template lang='pug'>
.payoff-list
    ul
        li(v-for="d,i in list" :key="d.id")
            span(:style="{'background-image':'url('+d.cover+')'}") {{d.name}}
            img.icon(@click="flgFn(i)" :src="!d.flg?'//s1.mi.com/m/images/m/check_normal.png':'//s1.mi.com/m/images/m/check_press.png'")
</template>
 
<script>
import zhifu from '../assets/js/zhifu'
export default {
  name: "vueName",
  data() {
    return {
      list: zhifu
    };
  },
  methods:{
    flgFn(i){
        
        this.list.forEach(item=>item.flg=false)
        this.list[i].flg = true
    }
  },
  created(){
    console.log(this.list)
  }
};
</script>
 
<style scoped lang="sass">
.payoff-list
    width: 100%
    li
        line-height: .47rem
        border-bottom: 1px solid #ccc
        display: flex
        position: relative
        padding-left: .1rem
        span 
            width: 1.4rem
            height: 100%
            background-size: .3rem .3rem
            background-repeat: no-repeat
            padding-left: .5rem
            background-position: .1rem .1rem
            font-size: .12rem
        .icon
            position: absolute
            width: .3rem
            height: .3rem
            right: 0
            top: .07rem
</style>